<template>
	<div   v-if="swiperList.length>1"    class="HomeSwiper">
		 <swiper :options="swiperOption" >
		    <!-- slides -->
		    <swiper-slide v-for="item in swiperList" :key="item.id">
		    	<img :src="item.imgUrl" />
		    </swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
		  </swiper>
	</div>
</template>

<script>
export default {
	props:["swiperList"],
    data() {
      return {
        swiperOption: {
          pagination: {
            el: '.swiper-pagination'
          },
          loop:true,
          autoplay:true
        }
      }
    }
    
  }
</script>

<style scoped>
	.HomeSwiper{
		width: 100%;
		height: 0px;
		padding-bottom: 26.6%;
		background-color: #E4E7EA;
	}
	.HomeSwiper >>> img{
		width:100%;
		height: 100%;
	}
	.HomeSwiper >>> .swiper-pagination-bullet-active{
		background: #fff;
	}
	
	
</style>